import React, { lazy, Suspense } from 'react';
import { RouteObject, createBrowserRouter } from 'react-router-dom';
import AuthGuard from '../components/auth/AuthGuard';
import MainLayout from '../components/layout/MainLayout';
import NotFound from '../pages/NotFound';
import Login from '../pages/auth/Login';
import Register from '../pages/auth/Register';
import { VerifyEmail } from '../pages/auth/VerifyEmail';

// 懒加载组件
const Dashboard = lazy(() => import('../pages/dashboard/'));
const Workspace = lazy(() => import('../pages/workspace'));
const Tasks = lazy(() => import('../pages/tasks'));
const Projects = lazy(() => import('../pages/projects'));
const Forbidden = lazy(() => import('../pages/Forbidden'));

// 加载组件
const Loader: React.FC = () => (
  <div className="flex items-center justify-center h-screen">
    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
  </div>
);

// 权限常量
const PERMISSIONS = {
  WORKSPACE: {
    VIEW: 'workspace:view',
    CREATE: 'workspace:create',
    UPDATE: 'workspace:update',
    DELETE: 'workspace:delete'
  },
  PROJECT: {
    VIEW: 'project:view',
    CREATE: 'project:create',
    UPDATE: 'project:update',
    DELETE: 'project:delete'
  },
  TASK: {
    VIEW: 'task:view',
    CREATE: 'task:create',
    UPDATE: 'task:update',
    DELETE: 'task:delete'
  }
};

// 路由配置
const routes: RouteObject[] = [
  // 主布局与受保护的路由
  {
    path: '/',
    element: (
      <Suspense fallback={<Loader />}>
        <AuthGuard>
          <MainLayout />
        </AuthGuard>
      </Suspense>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<Loader />}>
            <Dashboard />
          </Suspense>
        ),
      },
      {
        path: 'workspace',
        element: (
          <Suspense fallback={<Loader />}>
            <AuthGuard requiredPermissions={[PERMISSIONS.WORKSPACE.VIEW]}>
              <Workspace />
            </AuthGuard>
          </Suspense>
        ),
      },
      {
        path: 'projects',
        element: (
          <Suspense fallback={<Loader />}>
            <AuthGuard requiredPermissions={[PERMISSIONS.PROJECT.VIEW]}>
              <Projects />
            </AuthGuard>
          </Suspense>
        ),
      },
      {
        path: 'tasks',
        element: (
          <Suspense fallback={<Loader />}>
            <AuthGuard requiredPermissions={[PERMISSIONS.TASK.VIEW]}>
              <Tasks />
            </AuthGuard>
          </Suspense>
        ),
      },
    ],
  },
  // 无需认证的公共路由
  {
    path: '/auth',
    children: [
      {
        path: 'login',
        element: (
          <Suspense fallback={<Loader />}>
            <AuthGuard requireAuth={false}>
              <Login />
            </AuthGuard>
          </Suspense>
        ),
      },
      {
        path: 'register',
        element: (
          <Suspense fallback={<Loader />}>
            <AuthGuard requireAuth={false}>
              <Register />
            </AuthGuard>
          </Suspense>
        ),
      },
      {
        path: 'verify-email',
        element: <VerifyEmail />,
      },
    ],
  },
  // 错误页面
  {
    path: '/403',
    element: (
      <Suspense fallback={<Loader />}>
        <Forbidden />
      </Suspense>
    ),
  },
  {
    path: '*',
    element: (
      <Suspense fallback={<Loader />}>
        <NotFound />
      </Suspense>
    ),
  },
];

// 导出权限常量
export { PERMISSIONS };

// 创建路由器
const router = createBrowserRouter(routes);

// 导出路由器
export default router; 